<template>
  <div class="form-wrap">
    <Breadcrumb :titles="titles"></Breadcrumb>
    <div class="step-tab">
      <stepTab
        :items="[
          '基础要素服务',
          '项目生成',
          '立项用地规划许可',
          '工程建设许可',
          '建设工地核实'
        ]"
        @changeItem="changeItem"
      ></stepTab>
    </div>
    <div class="table-content" v-loading="!isShow">
      <!-- 基础要素服务 -->
      <basicElementService
        v-if="currentTab === 0 && isShow"
        :currentTab="currentTab"
        ref="jcys"
      ></basicElementService>
      <!-- 项目生成 -->
      <projectGeneration
        v-if="currentTab === 1 && isShow"
        :currentTab="currentTab"
        ref="xmsc"
      ></projectGeneration>
      <!-- 立项用地规划许可 -->
      <ProjectApproval
        v-if="currentTab === 2 && isShow"
        :currentTab="currentTab"
        ref="lxydghxk"
      ></ProjectApproval>
      <!-- 工程建设许可 -->
      <EngineeringConstructionPermit
        v-if="currentTab === 3 && isShow"
        :currentTab="currentTab"
        ref="gcjsxk"
      ></EngineeringConstructionPermit>
      <!-- 建设工程规划核实 -->
      <planningVerification
        v-if="currentTab === 4 && isShow"
        :currentTab="currentTab"
        ref="jsgcghhs"
      >
      </planningVerification>
    </div>
    <div
      class="bottom_box"
      v-if="
        currentTab == $route.query.defaultIndex &&
        (type == 'edit' || type == 'add')
      "
    >
      <div class="box_left"></div>
      <div class="box_right">
        <!-- <div
          class="sh save"
          @click="saveFileContent()"
        >
          保存
        </div> -->
        <div class="sh" @click="saveFileContent()">
          保存
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/breadcrumb/index'
import stepTab from './stepTab.vue'
import ProjectApproval from './ProjectApproval.vue'
import EngineeringConstructionPermit from './EngineeringConstructionPermit.vue'
import projectGeneration from './projectGeneration.vue'
import basicElementService from './basicElementService.vue'
import planningVerification from './planningVerification.vue'
import { examSave } from '@/api/zujuan'
import { saveOrUpdate } from '@/api/jbys'
import { updatexmscDetail } from '@/api/projectGeneration'
import { updatelxDetail } from '@/api/projectApproval'
import { updateGcjsxkDetail } from '@/api/gcjsxk'
import { updateJsgcghhsDetail } from '@/api/jsgcghhs'
export default {
  name: 'formPage',
  components: {
    stepTab,
    ProjectApproval,
    EngineeringConstructionPermit,
    projectGeneration,
    basicElementService,
    planningVerification,
    Breadcrumb
  },
  data() {
    return {
      items: [
        '基础要素信息',
        '项目生成',
        '立项用地规划许可',
        '工程建设许可',
        '建设工地核实'
      ],
      currentTab: '0',
      type: 'edit',
      pkid: '',
      titles: [],
      isShow: true
    }
  },
  mounted() {
    this.currentTab = Number(this.$route.query.defaultIndex)
    this.type = this.$route.query.type
    this.pkid = this.$route.query.pkid
      ? this.$route.query.pkid
      : ''
    this.titles = [this.items[this.currentTab]]
    console.log(this.pkid)
  },
  methods: {
    changeFile(data) {
      //更新提交的数据成某个参数格式
      let result = {}
      console.log('父组件获得了值', data)
      let hasRequireFile = false
      let clArr = []
      if (data.fjClPoList) {
        clArr = [...data.fjClPoList, ...data.cgClPoList]
      }
      if (data.sqClPoList) {
        clArr = [...data.sqClPoList, ...data.cgClPoList]
      }
      if (data.gcClPoList) {
        clArr = [...data.gcClPoList, ...data.cgClPoList]
      }
      for (let item of clArr) {
        if (
          item.requiredStatus === 1 &&
          (!item.dataClFilePoList ||
            item.dataClFilePoList.length === 0)
        ) {
          this.$message.warning('请上传文件：' + item.name)
          hasRequireFile = true
          break
        }
      }
      if (hasRequireFile) {
        return false
      } else {
        if (this.$route.query.defaultIndex == 0) {
          result.fjClVo = {}
          result.fjClVo.dataClFileVo = data.fjClPoList.map(
            (item) => {
              return {
                clId: item.pkid,
                fileIdList: item.dataClFilePoList.map(
                  (item2) => item2.fileId
                )
              }
            }
          )
          result.cgClVo = {}
          result.cgClVo.dataClFileVo = data.cgClPoList.map(
            (item) => {
              return {
                clId: item.pkid,
                fileIdList: item.dataClFilePoList.map(
                  (item2) => item2.fileId
                )
              }
            }
          )
          result = { ...result, ...data }
          console.log(result)
          return result
        } else if (this.$route.query.defaultIndex == 1) {
          result.sqClVo = {}
          result.sqClVo.dataClFileVo = data.sqClPoList.map(
            (item) => {
              return {
                clId: item.pkid,
                fileIdList: item.dataClFilePoList.map(
                  (item2) => item2.fileId
                )
              }
            }
          )
          result.cgClVo = {}
          result.cgClVo.dataClFileVo = data.cgClPoList.map(
            (item) => {
              return {
                clId: item.pkid,
                fileIdList: item.dataClFilePoList.map(
                  (item2) => item2.fileId
                )
              }
            }
          )
          result = { ...result, ...data }
          console.log(result)
          return result
        } else if (this.$route.query.defaultIndex == 2) {
          result.gcClVo = {}
          result.gcClVo.dataClFileVo = data.gcClPoList.map(
            (item) => {
              return {
                clId: item.pkid,
                fileIdList: item.dataClFilePoList.map(
                  (item2) => item2.fileId
                )
              }
            }
          )
          result.cgClVo = {}
          result.cgClVo.dataClFileVo = data.cgClPoList.map(
            (item) => {
              return {
                clId: item.pkid,
                fileIdList: item.dataClFilePoList.map(
                  (item2) => item2.fileId
                )
              }
            }
          )
          result = { ...result, ...data }
          console.log(result)
          return result
        } else if (this.$route.query.defaultIndex == 3) {
          result.sqClVo = {}
          result.sqClVo.dataClFileVo = data.sqClPoList.map(
            (item) => {
              return {
                clId: item.pkid,
                fileIdList: item.dataClFilePoList.map(
                  (item2) => item2.fileId
                )
              }
            }
          )
          result.cgClVo = {}
          result.cgClVo.dataClFileVo = data.cgClPoList.map(
            (item) => {
              return {
                clId: item.pkid,
                fileIdList: item.dataClFilePoList.map(
                  (item2) => item2.fileId
                )
              }
            }
          )
          result = { ...result, ...data }
          console.log(result)
          return result
        } else if (this.$route.query.defaultIndex == 4) {
          result.fjClVo = {}
          result.fjClVo.dataClFileVo = data.fjClPoList.map(
            (item) => {
              return {
                clId: item.pkid,
                fileIdList: item.dataClFilePoList.map(
                  (item2) => item2.fileId
                )
              }
            }
          )
          result.cgClVo = {}
          result.cgClVo.dataClFileVo = data.cgClPoList.map(
            (item) => {
              return {
                clId: item.pkid,
                fileIdList: item.dataClFilePoList.map(
                  (item2) => item2.fileId
                )
              }
            }
          )
          result = { ...result, ...data }
          console.log(result)
          return result
        }
      }
    },
    changeItem(item, index) {
      console.log(item, index)
      this.currentTab = index
      this.titles = [item]
    },
    saveFileContent() {
      // saveOrUpdate
      let param = {}
      if (this.currentTab == 0) {
        param = this.changeFile(this.$refs.jcys.parameter)
        this.$refs.jcys.$refs.formRules.validate(
          (valid) => {
            if (valid && param) {
              this.basicSaveOrUpdate(param)
            }
          }
        )
      } else if (this.currentTab == 1) {
        param = this.changeFile(this.$refs.xmsc.parameter)
        console.log(param, this.$refs.xmsc.parameter)
        this.$refs.xmsc.$refs.formRules.validate(
          (valid) => {
            if (valid && param) {
              this.xmscSaveForm(param)
            }
          }
        )
      } else if (this.currentTab == 2) {
        param = this.changeFile(
          this.$refs.lxydghxk.parameter
        )
        this.$refs.lxydghxk.$refs.formRules.validate(
          (valid) => {
            if (valid && param) {
              this.lxydghSaveForm(param)
            }
          }
        )
      } else if (this.currentTab == 3) {
        param = this.changeFile(this.$refs.gcjsxk.parameter)
        // this.examForm(param)
        this.$refs.gcjsxk.$refs.formRules.validate(
          (valid) => {
            if (valid && param) {
              this.gcjsxkSaveForm(param)
            }
          }
        )
      } else if (this.currentTab == 4) {
        param = this.changeFile(
          this.$refs.jsgcghhs.parameter
        )
        // this.examForm(param)
        this.$refs.jsgcghhs.$refs.formRules.validate(
          (valid) => {
            if (valid && param) {
              this.jsgcghhsSaveForm(param)
            }
          }
        )
      }
    },
    //基本要素新增或更新
    basicSaveOrUpdate(param) {
      console.log('基本要素保存')
      saveOrUpdate(param)
        .then((res) => {
          this.$router.back()
          this.$message.success(
            this.pkid ? '编辑成功' : '新增成功'
          )
        })
        .catch((err) =>
          this.$message.console.error(
            this.pkid ? '编辑失败' : '新增失败'
          )
        )
    },
    //项目生成
    xmscSaveForm(param) {
      console.log('项目生成')
      updatexmscDetail(param)
        .then((res) => {
          this.$router.back()
          this.$message.success('编辑成功')
        })
        .catch((err) =>
          this.$message.console.error('编辑失败')
        )
    },
    //立项用地规划
    lxydghSaveForm(param) {
      updatelxDetail(param)
        .then((res) => {
          this.$router.back()
          this.$message.success('编辑成功')
        })
        .catch((err) =>
          this.$message.console.error('编辑失败')
        )
    },
    //工程建设许可
    gcjsxkSaveForm(param) {
      updateGcjsxkDetail(param)
        .then((res) => {
          this.$router.back()
          this.$message.success('编辑成功')
        })
        .catch((err) =>
          this.$message.console.error('编辑失败')
        )
    },
    //建设工程规划核实
    jsgcghhsSaveForm(param) {
      updateJsgcghhsDetail(param)
        .then((res) => {
          this.$router.back()
          this.$message.success('编辑成功')
        })
        .catch((err) =>
          this.$message.console.error('编辑失败')
        )
    }
  }
}
</script>

<style scoped lang="scss">
.form-wrap {
  position: relative;
  width: 100%;
  height: 100% !important;
  overflow: auto;
  display: flex;
  flex-direction: column;
  background-color: #fff;
  .table-content {
    flex: 1 1 auto;
    overflow: auto;
  }
  .step-tab {
    width: 100%;
  }
}
.bottom_box {
  width: 100%;
  height: 78px;
  box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  border-radius: 2px;
  // position: fixed;
  position: absolute;
  bottom: 0;
  z-index: 1000;
  background: #ffffff;
  display: flex;
  align-items: center;
  padding: 0 29px 0 29px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  flex: 0 0 auto;
  .sh {
    width: 90px;
    height: 32px;
    background: #497fa3;
    border-radius: 2px;
    font-weight: 400;
    color: #ffffff;
    font-size: 14px;
    line-height: 32px;
    text-align: center;
    cursor: pointer;
    margin-left: 20px;
  }
  .shenheDisabled {
    cursor: default;
    background: rgb(245, 245, 245);
    color: rgb(176, 176, 176);
  }
  .save {
    background-color: #ffffff;
    border: 1px solid #497fa3;
    color: #497fa3;
  }
  .box_left {
    display: flex;
    justify-content: flex-start;
    .shTime {
      // align-items: center;
      display: flex;
      align-items: center;
      margin-left: 20px;
      .yijian {
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 500px;
      }
    }
  }
  .box_right {
    display: flex;
    // justify-content: flex-end;
  }
}
::v-deep {
  .el-input__inner {
    // background: #f6f9fc !important;
    color: #4c565c !important;
    height: 32px !important;
    width: 320px !important;
    // margin-left: 10px;

    .el-input__icon {
      width: 16px !important;
      height: 16px !important;
      font-size: 16px !important;
      line-height: 40px !important;
      margin-top: -25px !important;
    }

    .el-range-separator {
      width: 20px !important;
      margin-top: -5px !important;
    }

    .el-range-input {
      // background: #f6f9fc !important;
    }
  }

  .el-input.is-disabled .el-input__inner {
    background: #e8eff7 !important;
  }

  .el-button.is-disabled {
    background: #c0c4cc !important;
    border-color: #c0c4cc !important;
  }

  .el-input-group__append {
    position: absolute;
    height: 24px;
    line-height: 24px;
    width: 80px;
    text-align: right;
    top: 4px;
    left: 235px;
    border-color: rgba(0, 0, 0, 0);
    background: rgba(0, 0, 0, 0);
  }

  .el-input__suffix {
    top: 1px !important;
    right: 8px !important;

    .el-input__icon {
      width: 16px !important;
      height: 16px !important;
      font-size: 16px !important;
      line-height: 30px;
    }
    .is-reverse {
      line-height: 15px !important;
    }
  }

  .el-select {
    width: 320px !important;

    .el-input__inner {
      width: 320px !important;
      // margin-left: 10px;
    }

    .el-input__suffix {
      // top: 4px !important;
      .el-input__icon {
        width: 16px !important;
        height: 16px !important;
        font-size: 16px !important;
        line-height: 15px;
      }
      .is-reverse {
        line-height: 35px !important;
      }
    }

    .is-focus {
      .el-input__suffix {
        top: -3px !important;
      }
    }
  }

  .el-textarea__inner {
    // width: 320px !important;
    // background: #f6f9fc !important;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
  }

  .el-breadcrumb__inner {
    color: #606266 !important;
    font-weight: 400 !important;
  }
}
.preview-button {
  background: #497fa3;
  border: 1px solid #497fa3;
  border-radius: 2px;
  color: white;
}
.success {
  color: #00ca6d;
}
.fail {
  color: #f9801c;
}
</style>
